<#include "head_bus.ftl">
<!--内容开始-->
<div class="container">
    <ol class="breadcrumb">
     <li class="active">首页</a></li>
      <li><a href="${BASE_PATH}/product/product.htm">产品中心</a></li>
      <li class="active">IDC服务</li>
    </ol>
    <div class="i-content i-content-1 ">
        <form class="form-horizontal" role="form">
                <h3 class="title-1"><span>客户信息</span></h3>
                <div class="d-data d-data-1">
                       <div class="form-group">
                        <label class="col-sm-2 col-xs-3">客户名称：</label>
                        <div class="col-sm-4  col-xs-8">
                           <input type="text" name="user_name" id="user_name"   class="form-control" >
                        </div>                       
                    </div>
                </div>  
                <div class="d-data  d-data-1">                                   
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-3 ">客户地址：</label>
                        <div class="col-sm-2  col-xs-4">
                           <select class="select-small" name="province" id="province">
                           	 <#list province as pro>  
                              <option value="${pro}">${pro}</option>
                             </#list>
                           </select>
                        </div>
                        <div class="col-sm-2  col-xs-4">
                            <select class="select-small" name="city" id="city">
                              <option value="">请选择</option>
                           </select>                         
                        </div> 
                        <div class="col-sm-2  col-xs-4">
                            <select class="select-small" name="county" id="county">
                              <option value="">请选择</option>
                           </select>                         
                        </div>  
                        <div class="col-sm-2  col-xs-4">
                            <select class="select-small" name="street" id="street">
                              <option value="">请选择</option>
                           </select>                         
                        </div>    
                        <div class="col-sm-2  col-xs-4">
                            <select class="select-small" name="edifice" id="edifice">
                              <option value="">请选择</option>
                           </select>                         
                        </div>    
                        <div class="col-sm-2  col-xs-4">
                          <input type="radio" name="radio" id="radio" value="1">其他地址
                          <input type="radio" name="radio" id="radio" checked="true" value="2">无其他地址
                        </div> 
                        <div class="col-sm-2  col-xs-4">
                           <input type="text" name="address" id="address" class="form-control" disabled="true">                      
                        </div>                                                                      
                    </div>
                </div>  
                <div class="d-data d-data-1">
                       <div class="form-group">
                        <label class="col-sm-2 col-xs-3">联系电话：</label>
                        <div class="col-sm-4  col-xs-8">
                           <input type="text" name="user_phone" id="user_phone"  class="form-control" >
                        </div>                       
                    </div>
                </div>
                <h3 class="title-1"><span>租用时长</span></h3>
                <div class="use-age use-age-mt pr">
                    <h2 class="fl ml4">租用时长：</h2>
                    <div class="fl rents">
                    <#list year as yearValue>
                     	<#if yearValue_index == 0>
                     		<label><input type="radio" class="rentTime" name="rent" value="${yearValue}" checked/>${yearValue}年</label>
                     	<#elseif !yearValue_has_next>
                     		<label><input type="radio" class="rentTime" name="rent" value="${yearValue}"/>${yearValue}年及以上（<font color=red>请在文本框输入</font>）</label>
                     	<#else>
                     		<label><input type="radio" class="rentTime" name="rent" value="${yearValue}"/>${yearValue}年</label>
                     	</#if>
					</#list> 
					<#if year?size gt 1>
						<label><input type="text" id="yearValue" disabled onblur="checkInputNumValue()"/></label>
					</#if>
                       <!--   <label><input type="radio" class="rentTime" name="rent"/>1年</label>
                         <label><input type="radio" class="rentTime" name="rent"/>2年</label>
                         <label><input type="radio" class="rentTime" name="rent"/>3年</label>
                         <label><input type="radio" class="rentTime" name="rent"/>4年</label>
                         <label><input type="radio" class="rentTime" name="rent"/>5年</label>
                         <label><input type="radio" class="rentTime" name="rent"/>6年</label>
                        <p class="f13">当前时长为<em class="i-month">1</em>年<i class="colR">（最短为一年）</i></p> -->
                    </div>
                </div>
                <h3 class="title-1"><span>宽带信息</span></h3>
                <div id="daikuan_type" class="mtb30 f15 d-data mtb5">
                    <label class="checkbox-inline">
                    <input type="radio" name="optionsRadiosinline1" id="optionsRadios3" 
                       value="1" checked> 单线
                 </label>
                 <label class="checkbox-inline">
                    <input type="radio" name="optionsRadiosinline1" id="optionsRadios4" 
                       value="2"> 双线
                 </label>                 
                </div>

                <div class="use-age">
                    <h2 class="fl">宽带信息：</h2>
                    <div class="fl  bandTop">
                        <select  class="bandList" name="bandList">
                            <option value="">10M</option>
                            <option value="">20M</option>
                            <option value="">30M</option>
                        </select>
                        <!-- <p class="f13">当前带宽为<em class="i-line">10</em>M<i class="colR">（赠送<em class="i-ip">0</em>个IP）</i></p> -->
                    </div>
                </div>             
                <p class="input-prepend input-group">
                    <label class="fl">&nbsp;&nbsp;&nbsp;&nbsp;开始日期：</label>
                    <input type="text" name="start_date1" id="start_date1" class="Wdate" onClick="WdatePicker({dateFmt:'MM/dd/yyyy',minDate:'%y-%M-%d}'})" placeholder="请选择日期"/>
        		</p> 
                <h3 class="title-1"><span>服务类别</span></h3>
                <div class="mtb30 f15 d-data mtb5">
                    <label class="checkbox-inline">
                    <input type="radio" name="optionsRadiosinline"
                       value="option1" checked> 服务器托管
                 </label>
                 <label class="checkbox-inline">
                    <input type="radio" name="optionsRadiosinline"
                       value="option2" disabled> 虚拟主机（云池）
                 </label>                 
                </div>  
                 <h3 class="title-1"><span>设备配置</span></h3>
                 <div class="d-data d-data-1">
                 <div class="form-group select-item ">
                      <label  class="col-sm-2 col-xs-3">方式：</label>
                      <select class="form-control-inline" id="options" name="options">
                         <option></option>
                         <option value="jj">机架</option>
                         <option value="jg">机柜</option>
                      </select>
                </div>                
                 
                 </div>               

                <div class="option-1" id="option-0">
                     <div class="d-data d-data-1">
                           <div class="form-group">
                            <label class="col-sm-2 col-xs-3">数量：</label>
                            <div class="col-sm-3  col-xs-2">
                               <input type="text" class="form-control"  id="buy_count_4" name="buy_count_4" onblur="setPrice()">
                            </div> 
                            <div class="col-sm-3 col-xs-7"> U <i id="jijia" class="colR">（单价：）</i><input type="hidden" id="jjprice"/></div>                    
                        </div>
                    </div>                                     
                </div> 
                <div class="option-1"  id="option-1">
                     <div class="d-data d-data-1">
                           <div class="form-group  select-item">
                              <label  class="col-sm-2 col-xs-3">尺寸：</label>
                              <select id="jiguitype" class="form-control-inline" name="jiguitype">
                              </select>                      
                        </div>
                    </div>  
                                  
                </div>
                    <div class="d-data d-data-1">
                           <div class="form-group">
                            <label class="col-sm-2 col-xs-3">IP数量：</label>
                            <div class="col-sm-3  col-xs-2">
                               <input type="text" class="form-control" id="buy_count_2" onblur="setPrice()">
                            </div>  
                            <div  class="col-sm-3  col-xs-7"> 个<i id="IP" class="colR">（IP单价：）</i><input type="hidden" id="iPprice"/></div>                     
                        </div>
                    </div>     
                  <div class="use-age use-age-mt  mb140">
                    <h2 class="fl">预算费用：</h2>
                    <span id="cost_money_show_2">总计：0元</span>
                    <input value="280.00" name="cost_money" id="cost_money_2" type="hidden">
                    <input  name="total_money" id="total_money" type="hidden">
                </div>                           
                <div class="form-group">
                    <div class="text-center">
                        <a onclick="addIdcOrder()" class="btn btn-180">申请</a>
                        <a href="${BASE_PATH}/product/product.htm" class="btn btn-180 reset ml80 ">取消</a>
                        <input type="hidden" id="base_path" value="${BASE_PATH}" />
                    </div>
                </div>         
                
                <#list queryAll as entity>
                 	${entity.orderNo}
				</#list> 
        </form>
    </div>  
</div>

<script type="text/javascript" src="${BASE_PATH}/static/business/js/idcslides.js?randomId=${time}"></script>
<script type="text/javascript" src="${BASE_PATH}/static/business/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${BASE_PATH}/static/business/js/messages_zh.min.js"></script>
<script type="text/javascript">
$().ready(function() {
	var selValue=$("select[name=province] option:selected").val();
	getCity(selValue);

	$("select[name=province]").change(function(){
		getCity($(this).val());
	});
	
	$("select[name=city]").change(function(){
		getCounty($(this).val());
	});
	
	$("select[name=county]").change(function(){
		getStreet($(this).val());
	});
	
	$("select[name=street]").change(function(){
		getEdifice($(this).val());
	});
	
	$("input[name=radio]").change(function(){
		if($(this).val()==1){
			$("#address").prop("disabled",false);
		}else{
			$("#address").prop("disabled",true);
		}
	});
});
//获取城市
function getCity(value){
$("#city").empty();
	$.ajax({
	            cache: true,
	            type: "POST",
	            url:"${BASE_PATH}/product/getCity.json",
	            dataType : 'json',
	            data:{value:value},
	            async: false,
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	            success: function(data){
	               if(null!=data.values){
	               	for(var i=0;i<data.values.length;i++){
	               		$("#city").append("<option value='"+data.values[i]+"'>"+data.values[i]+"</option>"); 
	               	}
	               	getCounty(data.values[0]);
                   }
	               else{
	               }
	           }
	   });
}

//获取县/区
function getCounty(value){
$("#county").empty();
	$.ajax({
	            cache: true,
	            type: "POST",
	            url:"${BASE_PATH}/product/getCounty.json",
	            dataType : 'json',
	            data:{value:value},
	            async: false,
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	            success: function(data){
	               if(null!=data.values){
	               	for(var i=0;i<data.values.length;i++){
	               		$("#county").append("<option value='"+data.values[i]+"'>"+data.values[i]+"</option>"); 
	               	}
	               	getStreet(data.values[0]);
                   }
	               else{
	               }
	           }
	   });
}

//获取街道
function getStreet(value){
$("#street").empty();
	$.ajax({
	            cache: true,
	            type: "POST",
	            url:"${BASE_PATH}/product/getStreet.json",
	            dataType : 'json',
	            data:{value:value},
	            async: false,
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	            success: function(data){
	               if(null!=data.values){
	               	for(var i=0;i<data.values.length;i++){
	               		$("#street").append("<option value='"+data.values[i]+"'>"+data.values[i]+"</option>"); 
	               	}
	               	getEdifice(data.values[0]);
                   }
	               else{
	               }
	           }
	   });
}

//获取大厦
function getEdifice(value){
$("#edifice").empty();
	$.ajax({
	            cache: true,
	            type: "POST",
	            url:"${BASE_PATH}/product/getEdifice.json",
	            dataType : 'json',
	            data:{value:value},
	            async: false,
	            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	            success: function(data){
	               if(null!=data.values){
	               	for(var i=0;i<data.values.length;i++){
	               		$("#edifice").append("<option value='"+data.values[i]+"'>"+data.values[i]+"</option>"); 
	               	}
                   }
	               else{
	               }
	           }
	   });
}







$().ready(function() {
	jQuery.validator.addMethod("isPhone", function(value,element) {
	var length = value.length;
	var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
	var tel = /^\d{3,4}-?\d{7,9}$/;
	return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话"); 
jQuery.validator.addMethod("positiveinteger", function(value, element) {
	if(value == ''){
		return true;
	}
   var aint=parseInt(value);	
    return aint>0&& (aint+"")==value;   
  }, "请输入正整数");   
  
  jQuery.validator.addMethod("modeverification", function(value, element) {
  		var index =$("#options").children('option:selected').index();
  		if(index == 1){
  			var buy_count_4 = $("#buy_count_4").val();
  			var val=parseInt(buy_count_4);	
   			return val>0;  
  		}else if (index ==2){
  			if(''!=$('#jiguitype').val()){
  				return true;
  			}else{
  				return false;
  			}
  		}else {
  			return true;
  		}
  }, ""); 
// 在键盘按下并释放及提交后验证提交表单
  $(".form-horizontal").validate({
	    rules: {
	      user_name: "required",
	      user_addr: "required",
	      user_addr2: "required",
	      user_addr3: "required",
	      user_phone: {
	      	required: true,
	        isPhone: true
	      },
	      start_date1: "required",
	      options: "required",
	      buy_count_4: "modeverification",
	      jiguitype: "modeverification",
	      buy_count_2: "positiveinteger"
	    },
	    messages: {
	      user_name: "请输入客户名称",
	      user_addr: "请输入省/直辖市",
	      user_addr2: "请输入区县",
	      user_addr3: "请输入详细地址",
	      user_phone: {
	      	required: "请输入联系电话",
	        isPhone: "请正确填写联系电话"
	      },
	      start_date1: "请选择开始日期",
	      options: "请选择方式",
	       buy_count_4:"请输入正确的数量",
	      jiguitype:"请选择尺寸",
	      buy_count_2: "请输入正确的IP数量"
	    }
	});
});

function addIdcOrder(){
	if($('.form-horizontal').valid()){
		var username= $('#user_name').val();
		
		
	    var useraddr = "";
	    var useraddr2 = "";
	    var useraddr3 = "";
	    
	    if($("input[name=radio]:checked").val()==1){
   			useraddr = $("#address").val();
	   	}else{
	   		useraddr = $("select[name=province] option:selected").val()+$("select[name=city] option:selected").val();
	   		useraddr2 = $("select[name=county] option:selected").val()+$("select[name=street] option:selected").val();
	   		useraddr3 = $("select[name=edifice] option:selected").val();
	   	}
	    var userphone = $('#user_phone').val();
	    var start_time=$('#start_date1').val();
	    
	    var freeIP = 2;  //赠送的IP数量
	    var buyIP = $('#buy_count_2').val(); //购买的IP数量
	    var IDCType;
	    if(''==$('#options').val())
	    {
	       alert("请选择IDC方式");
	       return;       
	    }
	    else if("jg"== $('#options').val())
	        IDCType = '0';  //0,为机柜
	    else
	        IDCType = '1';  //1,为机架
	    var jijiacount = $('#buy_count_4').val();  //租用的机架数量
	    var jiguitype = $('select[name=jiguitype] option:selected').text();  //租用的机柜尺寸
	    
	    var time_span = ""; //租用时长
		var flag=$("#yearValue").prop("disabled");
		if(flag){
			time_span=$("input[name=rent]:checked").val();
		}else{
			time_span=$("#yearValue").val();
		}
		
		if(''==time_span){
			alert("请填写具体租用时长!");
			return;
		}
	    var speedtype = $('#daikuan_type input[name="optionsRadiosinline1"]:checked ').val(); //单线，双线
	   // var daikuan_speed = $('#tot_volume_2').val();  // 带宽： 10M 50M 1G
	    var daikuan_speed = $("select[name=bandList] option:selected").text();
	   // var totalMoney = 20000;         //总费用
	    var totalMoney=$("#total_money").val();
				$.ajax({
		            cache: true,
		            type: "POST",
		            url:"${BASE_PATH}/order/addIdcOrder.json",
		            dataType : 'json',
		            data:{user_name:username,user_addr:useraddr,user_addr2:useraddr2,
		                  user_addr3:useraddr3,user_phone:userphone,order_span:time_span,speed_type:speedtype,
		                  IDC_type:IDCType,free_IP:freeIP,buy_IP:buyIP,
		                  jijia_count:jijiacount,jigui_type:jiguitype,
		                  IDC_speed:daikuan_speed,cost_money:totalMoney,start_time:start_time},
		            async: false,
		            success: function(data){
		               if(data.result)
		               {
							alert("申请IDC服务成功，请在订单审核通过后付款！");
							window.location.href="${BASE_PATH}/order/business.htm";
	                   }
		               else
		               {
		               	  for(var one in data.errors)
		                  alert(data.errors[one]);	
		               }
		           }
		        });
	}
}

$().ready(function() {
	//默认获取第一个年份的带宽+价格
	getMB($("input[name=rent]").first().val());
	setPrice();
	//
	$("input[name=rent]").change(function(){
		if($(this).val()==$("input[name=rent]").last().val()){
			$("#yearValue").prop("disabled",false);
			getMB($(this).val());
			if(''!=$("#yearValue").val()){
				//刷新价格
				setPrice();
			}
		}else{
			$("#yearValue").prop("disabled",true);
			getMB($(this).val());
			//刷新价格
			setPrice();
		}
	});
	
	//单双线切换
	$("input[name=optionsRadiosinline1]").change(function(){
		//刷新价格
		setPrice();
	})
	
	//带宽切换
	$("select[name=bandList]").change(function(){
		//刷新价格
		setPrice();
	});
	
	//设备方式切换
	$("select[name=options]").change(function(){
		//刷新价格
		var index=$(this).children('option:selected').index();
        if(index==1){
            $('#option-0').show().siblings('.option-1').hide();
        }else if(index==2){
            $('#option-1').show().siblings('.option-1').hide();          
        }
		setPrice();
	});
	
	//机柜尺寸切换
	$("select[name=jiguitype]").change(function(){
		//刷新价格
		setPrice();
	});
});
function checkInputNumValue(){
	//var num=$("input[name=rent]").last().val()+"-99";
	var num=$("input[name=rent]").last().val();
	//var r="["+num+"]";
	//var reg=new RegExp(r);
	var inputNum=$("#yearValue").val();
	//if(!reg.test($("#yearValue").val())){
	if(parseInt(inputNum)>=num && parseInt(inputNum)<=99){
		//修改价格
		setPrice();
	}else{
		alert("请输入"+$("input[name=rent]").last().val()+"-99之间的数字");
		$("#yearValue").val("");
		return;
	}
}
//获取带宽
function getMB(yValue){
	$(".bandList").empty();
	$.ajax({
        cache: true,
        type: "POST",
        url:"${BASE_PATH}/product/getMBAndPrice.json",
        dataType : 'json',
        data:{minValue:yValue,type:'IDC'},
        async: false,
        success: function(data){
           if(null!=data.mbList)
           {
	           	for(var i=0;i<data.mbList.length;i++){
	           		$(".bandList").append("<option value='"+data.mbList[i].unit_price+"'>"+data.mbList[i].ladder_son+"M</option>"); 
	           	}
           }
           else
           {
           	 alert("请求数据失败");
           }
       }
    });
}

function setPrice(){
	//1.获取总价格
	var total_money=$("select[name=bandList] option:selected").val();
	var first=$("input[name=rent]").first().val();
	var last=$("input[name=rent]").last().val();
	//2.先判断是否为文本框填写时长
	var inputYearDisabled=$("#yearValue").prop("disabled");
	//yearValue 为true 表示没输入东西,总价格不改变,还以total_money 为准
	var inputYear=$("#yearValue").val();
	//2.1.(总价格/最大年份)*填写时长
	//yearValue 为false 表示文本框有输入年份,则价格以公式计算
	if(!inputYearDisabled){
		total_money=parseFloat((total_money/last)*inputYear);
	}
	//2.2.判断是单线还是双线(双线*1.5)
	var singleOrDouble=$("input[name=optionsRadiosinline1]:checked").val();
	//2.3.money=((总价格/最大年份)*填写时长)*(1 or 1.5);
	if(singleOrDouble==1){
		total_money=parseFloat(total_money)*1;
	}else{
		total_money=parseFloat(total_money)*1.5;
	}
	//3.判断是机架还是机柜
	var jjorjg=$("select[name=options] option:selected").val();
	var ipNum=$("#buy_count_2").val();
	var ipPrice=$("#iPprice").val();
	if(''!=jjorjg){
		//3.1机架的话判断U数量和IP数量是否为空
		if(jjorjg=='jj'){
			var Unum=$("#buy_count_4").val();
			var Uprice=$("#jjprice").val();
			//3.2不为空的话 money+Uprice+IPprice
			if(''!=Unum){
				total_money=parseFloat(total_money)+parseFloat((Unum*Uprice));
			}
			if(''!=ipNum){
				total_money=parseFloat(total_money)+parseFloat((ipNum*ipPrice));
			}
		}else{
			//3.3机柜的话
			//3.4获取当前选择机柜的价格
			var jgprice=$("select[name=jiguitype] option:selected").val();
			//3.5 money+尺寸price+IPprice
			total_money=parseFloat(total_money)+parseFloat(jgprice);
			if(''!=ipNum){
					total_money=parseFloat(total_money)+parseFloat((ipNum*ipPrice));
			}
		}
	}
	total_money=parseFloat(total_money).toFixed(2);
	//4.总价格显示到页面
	$("#cost_money_show_2").text("总计："+total_money);
	//4.1总价格存放到隐藏域
	$("#total_money").val(total_money);
}
</script>

<#include "foot_bus.ftl">